<!--
 * @Description: 正则表达式练习题
 * @Author: zzj
 * @Date: 2021-09-10 10:47:54
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-15 18:53:21
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type=text]{
            width: 340px;
            height: 32px;
            border:2px dodgerblue solid;
            padding-left: 18px;
        }
    </style>
</head>
<body>
    <h1>注册界面</h1>
    <form action="#">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="username" placeholder="请输入6-15位有效字符"></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>
                    <input type="text" id="mail" placeholder="请输入邮箱">
                    <span id="mail_check"></span>
                </td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td><input type="text" id="phone" placeholder="请输入11位有效数字"></td>
            </tr>
            <tr>
                <td>网址：</td>
                <td><input type="text" id="url" placeholder="请输入正确的网址"></td>
            </tr>
            <tr>
                <td>上传文件：</td>
                <td><input type="file" id="file"></td>
            </tr>
        </table>
        <p>匹配到的元素列表</p>
        <ul id="regs"></ul>
    </form>
    <script>
        var username = document.getElementById("username");
        username.onchange = function(){
            var username_value = username.value;
            var reg = /^\w{6,15}$/;
            if(reg.test(username_value)){
                username.style.borderColor = "green";
            }else{
                username.style.borderColor = "red";
            }
        }

        var mail = document.getElementById("mail");
        mail.oninput = function(){
            var mail_value = mail.value;
            var reg = /^\w{3,15}@\w{2,8}\.com$/;
            var mail_check = document.getElementById("mail_check");
            if(reg.test(mail_value)){
                mail_check.innerHTML = "√";
            }else{
                mail_check.innerHTML = "×";
            }
        }

        var url = document.getElementById("url");
        //http:// https://www.baidu.com
        url.oninput = function(){
            var url_value = url.value;
            var reg = /^https?:\/\/www\.([a-z]|[0-1]){1,15}\.com$/;
            check.call(this,reg,value);
            if(reg.test(url_value)){
                url.style.borderColor = "green";
            }else{
                url.style.borderColor = "red";
            }
        }

        var file = document.getElementById("file");
        file.onchange = function(){
            var read = new FileReader();
            read.onload = function(){
                var res = read.result;  //结果
                //获取所有的ip数组
                var reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/gm;
                res = res.match(reg); 
                //去重
                var s = new Set(res);  //Set集合，成员一定不重复，是一个类数组
                res = Array.from(s);  //将类数组转回数组类型
                //放到网页上显示一个列表(ul  li)
                var regs = document.getElementById("regs");
                var lis = "";
                res.forEach(i => {
                    lis += "<li>";
                    lis += i;
                    lis += "</li>";
                });
                regs.innerHTML = lis;
                //sessionStorage.setItem("res",read.result);  //本地存储（存储后在项目其他文件也可以获取到）
            }
            read.readAsText(this.files[0]);
        }
    </script>
</body>
</html>